<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>IDF Tracing</title>
  </head>

  <body>
    <div id="app">
      <div class="notification is-danger" v-if="errorMsg">
        <button class="delete" v-on:click="errorMsg = ''"></button>
        {{errorMsg}}
      </div>
      <header class="section">
        <div class="container">
          <nav class="level is-mobile">
            <h1 class="title is-size-5 is-size-6-mobile" v-html="title"></h1>
          </nav>
          <p class="subtitle is-size-6 is-size-7-mobile">
            {{subtitle}}
          </p>
        </div>
      </header>
      <div class="section no-padding-top">
        <div class="container">
          <div class="notification is-clipped">
            <nav class="level is-mobile">
              <div class="level-left">
                <div class="level-item">
                  <span class="icon">
                    <i class="codicon codicon-pulse is-size-3"></i>
                  </span>
                </div>
                <div class="level-item">
                  {{fileName}}
                </div>
              </div>
              <div class="level-right">
                <div class="level-item">
                  <button
                    class="button"
                    v-on:click="showReport"
                    v-bind:class="{ 'is-loading': isCalculating, 'is-static': isCalculating }"
                  >
                    Show Report
                  </button>
                </div>
              </div>
            </nav>
          </div>
        </div>
        <br />
        <div class="container" v-if="log">
          <div class="notification">
            <pre v-html="log"></pre>
          </div>
        </div>
        <div class="container" v-if="heap">
          <div class="notification">
            <quick-action-menu v-on:change="heapViewChange"></quick-action-menu>
            <div>
              <plot
                v-show="heapView.plot"
                v-bind:chart="plotData"
                v-on:selected="plotSelected"
                v-bind:events="eventIDs"
              >
              </plot>
              <call-stack
                v-show="heapView.callStack"
                v-bind:callstack="callStacks"
                v-bind:cache="callersAddressTranslationTable"
                v-on:event-filter-updated="filterCallStacks"
              ></call-stack>
              <leak-list
                v-show="heapView.leaks"
                v-bind:leaks="allocLookupTable"
                v-bind:cache="callersAddressTranslationTable"
              ></leak-list>
              <stats-view
                v-show="heapView.stats"
                v-bind:persistent-count="persistentCount"
                v-bind:persistent-bytes="persistentBytes"
                v-bind:transient-count="transientCount"
                v-bind:total-bytes="totalBytes"
                v-bind:total-count="totalCount"
              ></stats-view>
            </div>
          </div>
          <quick-call-stack
            v-if="tracePane"
            v-bind:info="traceInfo"
            v-on:dismiss="tracePane = false"
          >
          </quick-call-stack>
        </div>
      </div>
    </div>
  </body>
</html>
